<template>
    <div class="MessageNote">
        <div class="toBackFn">
            <div class="toGo" @click="myBack">
                <span class="iconfont icon-zuojiantou"></span>
            </div>
            <div class="toThem">
                <span>连载</span>
            </div>
        </div>
        <div class="nove_title">
           <h3>{{title}}</h3>
        </div>
        <div class="nove_nav">
            <div class="nav_author f_left">
                <span>文/小白</span>
            </div>
            <div class="nav_icon f_right">
                <span class="iconfont icon-caidan"></span>
            </div>
        </div>
        <div class="nove_con">
            <p>{{content}}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
          title:"正在加载中",
          content : "正在加载中",
        }
    },
    methods:{
        myBack(){
            this.$router.go(-1);
        }
    },
    created(){
        let url = `https://v2.alapi.cn/api/mryw?token=ZpuG4IJuCdGYDXC1`;
        let pro = axios.get(url);
        pro.then(
            res => {
                let msg = res.data.data;
                //标题
                this.title = msg.title;
                //获取内容
                let con = msg.content;
                //去除html标签
                let info = con.replace(/<[^>]+>/g,'');
                this.content = info;
            },
            err =>{
                console.log(err);
            }
        )

    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";

.MessageNote{
    width: 100%;
    height: 100%;
    background: #fff;
    //连载
    .toBackFn{
        width: 100%;
        height: 50px;
        position: fixed;
        background: #fff;
        border-bottom:1px solid #ccc;
        div{
            width: 100px;
            height: 50px;
            line-height: 50px;
            position: relative;
        }
        .toGo{
            position: absolute;
            span{
                font-size: 20px;
                padding-left: 15px;
            }
        }
        .toThem{
           position: absolute;
           font-size: 20px;
           left: 40%;
        }
    }
    //标题
    .nove_title{
        height: 80px;
        line-height: 80px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        color: #333333;
        padding-top: 60px;
    }
    //作者
    .nove_nav{
        height: 100px;
        line-height: 100px;
        .nav_author{
           width: 60px;
           font-size: 16px;
           margin-left: 20px;
           color: #606060;
        }
        .nav_icon{
           width: 50px;
           margin-top: -5px;
           color:#aaaaaa;
           span{
             font-size: 20px;
           }
        }
    }
    //内容
    .nove_con{
        font-size: 16px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        color:#676767;
    }
}
</style>